<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  p{
	padding:0;
	margin:0;
  }
  
  p {
	width: 200px;
	height: 200px;
	overflow: auto;
  }

  .zdbox span {
	width: 40px;
	height: 20px;
	background: #e7e7e7;
	cursor: pointer;
	
	text-align: center;
	line-height: 20px;
	border: 1px solid green;
	border-radius: 2px;
  }
  </style>

 </head>
 <body>
 <div class='zdbox'>
		<span id="zhzdbox">字号增大</span>
		<span id="zhjxbox">字号减小</span>
		<p style="font-size: 18px;" id="wzbox">
				文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
		</p>
 </div>
 </body>
</html>

<script>
var oZhzdbox = document.getElementById('zhzdbox');
var oZhjxbox = document.getElementById('zhjxbox');
var oWzbox = document.getElementById('wzbox');
var a = 18;

oZhzdbox.onclick = function(){
	a++
	oWzbox.style.fontSize = a+'px';
};
oZhjxbox.onclick = function(){
	a--
	oWzbox.style.fontSize = a+'px';
};
/*var oBox = document.getElementById('box');
var oBoxc = document.getElementById('boxc');
//oBoxc.className = 'boxb';
oBox.onmouseover = function(){
	oBoxc.className = 'boxb';
};*/
</script>
